2.1.2.2 Custom UI

Overview

The VerifySpeed Web Package enables secure phone number verification in web applications through two methods:

1. Deep Link Verification - Users verify their phone numbers by interacting with external messaging apps like Telegram or WhatsApp
2. OTP (One-Time Password) - Users receive and enter a verification code sent via SMS

This package provides a simple API to implement either or both verification methods, with full control over the UI and user experience.

Get started

• Install the VerifySpeed Web package using npm:

npm install verifyspeed-web

Initializing VerifySpeed

To start using VerifySpeed, set your client key and initialize the SDK to get available verification methods:

// Set your client key
VerifySpeed.setClientKey('YOUR_CLIENT_KEY');

// Initialize to get available verification methods
const methods = await VerifySpeed.initialize();

The initialize method returns an array of available verification methods. Each method has two properties:

• methodName: Internal identifier used in API calls
• displayName: Human readable name for display in your UI

For example, the VerifySpeed.initialize() method might return:

[
  {
    methodName: 'telegram-message',
    displayName: 'Telegram Message'
  },
  {
    methodName: 'whatsapp-message',
    displayName: 'WhatsApp Message'
  },
  {
    methodName: 'sms-otp',
    displayName: 'SMS OTP'
  }
]

Deep Link Verification

Use verifyPhoneNumberWithDeepLink to generate a QR code for deep link verification:

• deepLink: The deep link URL provided by your backend
• methodName: The method name provided by your backend (e.g., telegram-message, whatsapp-message)

const qrCode = await VerifySpeed.verifyPhoneNumberWithDeepLink('DEEP_LINK', 'METHOD_NAME');

if (qrCode) {
  // Display the QR code image
}

warning

The verifyPhoneNumberWithDeepLink method returns different results based on the user's device:

• If the method returns null, it means the user is on a mobile device. In this case, the VerifySpeed package automatically handles the redirection to the appropriate messaging app (Telegram, WhatsApp, etc.).

• If the method returns a QR code image, it means the user is on a non-mobile device (like desktop). You should display this QR code for the user to scan with their mobile device to complete the verification process.

OTP Verification

Send OTP

Use sendOTP to initiate OTP verification:

• verificationKey: Unique key provided by your backend
• phoneNumber: User's phone number in E.164 format (e.g., +1234567890)

await VerifySpeed.verifyPhoneNumberWithOTP('VERIFICATION_KEY', 'PHONE_NUMBER');

Validating OTP

After the user receives the OTP, validate it using validateOTP:

try {
  const token = await VerifySpeed.validateOTP('OTP_CODE');

  console.log('Verification successful:', token);
} catch (error) {
  console.error('Verification failed:', error.message);
}

Getting Verification Token

Once verification is complete (either through Deep Link or OTP), get the verification token:

const token = await VerifySpeed.getVerificationToken('VERIFICATION_KEY');

Token Verification Best Practice

We recommend implementing a polling mechanism to fetch the verification token, as you won't know exactly when the user completes the verification process. Tokens are valid for up to 5 minutes after verification, so it's best to poll for the token continuously during this window.

This polling functionality is already implemented in the example projects available on GitHub

UI Customization

QR Code (Optional)

You can globally configure QR code settings using the configureQRCode method:

VerifySpeed.configureQRCode({
  width: 300,
  image: 'https://i.ibb.co/kVB67QTD/Verify-Speed.png',
  imageOptions: {
    imageSize: 0.4,
    margin: 2,
  },
});

Smart App Banner (Optional)

You can customize the Smart App Banner using the configureSmartAppBanner method:

VerifySpeed.configureSmartAppBanner({
  onClose: () => {
    console.log('Smart app banner closed')
  },
  position: 'top',
  theme: 'dark',
  closeButtonStyle: 'background-color: #000; color: #fff; border: none; padding: 5px 10px; border-radius: 5px',
  containerStyle: 'background-color: #000; color: #fff; padding: 10px; border-radius: 5px;',
  customColors: {
    background: '#000',
    text: '#fff',
    button: '#fff',
    buttonText: '#000',
  },
});

Example

For a complete implementation, see the examples project on GitHub

tip

When implementing the example, you'll need to integrate with your backend using the recommended request/response structures.

tip

In example projects, search for keywords TIP if you want to know how to implement Web Integration.